<template>
  <div class="DrainageSet-box">
    <el-form label-width="84px" ref="formRef" :model="formData" :rules="formRules" :disabled="props.pageType == 'look'">
      <el-form-item label="引流页面" prop="share_type">
        <el-radio-group v-model="formData.share_type">
          <el-radio :label="1">名片</el-radio>
          <el-radio :label="2">海报</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 名片 -->
      <blockquote v-if="formData.share_type == 1">
        <el-form-item label="页面标题 " prop="card.title">
          <el-input style="width: 580px" v-model="formData.card.title" placeholder="请输入页面标题" maxlength="15" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="企业名称 " prop="card.company_name">
          <el-input style="width: 580px" v-model="formData.card.company_name" placeholder="请输入企业名称" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="企业logo " prop="card.company_logo">
          <div :class="`upload-content ${props.pageType == 'look' ? 'noEdit' : ''}`">
            <el-upload v-if="!formData.card.company_logo" @click="getUploadKey(1)" :on-change="(rawFile: any, fileList: any[]) => beforeAvatarUpload(rawFile, fileList, 5)" accept=".jpg,.jpeg,.png,.JPG,.JPEG" :show-file-list="false" :limit="2" :auto-upload="false">
              <div class="upload-box">
                <img src="@/assets/image/content/add-icon.png" alt="" />
                <div>点击上传</div>
              </div>
            </el-upload>
            <div class="upload-file-box" v-else>
              <el-image style="width: 100%; height: 100%" :src="formData.card.company_logo" fit="cover" />
            </div>
            <img v-if="formData.card.company_logo" @click="delFile(1)" class="del" src="@/assets/image/customer/close_icon.png" alt="" />
            <div class="desc">*建议尺寸比例1:1，图片大小不超过5M</div>
          </div>
        </el-form-item>
        <el-form-item label="扫码引导 " prop="card.guide">
          <el-input style="width: 580px" v-model="formData.card.guide" placeholder="请输入扫码引导" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="门店广告 " prop="card.store_adv_url">
          <div :class="`upload-content ${props.pageType == 'look' ? 'noEdit' : ''}`">
            <el-upload v-if="!formData.card.store_adv_url" @click="getUploadKey(2)" :on-change="(rawFile: any, fileList: any[]) => beforeAvatarUpload(rawFile, fileList, 2)" accept=".jpg,.jpeg,.png,.JPG,.JPEG" :show-file-list="false" :limit="2" :auto-upload="false">
              <div class="upload-box">
                <img src="@/assets/image/content/add-icon.png" alt="" />
                <div>点击上传</div>
              </div>
            </el-upload>
            <div class="upload-file-box" v-else>
              <el-image style="width: 100%; height: 100%" :src="formData.card.store_adv_url" fit="cover" />
            </div>
            <img v-if="formData.card.store_adv_url" @click="delFile(2)" class="del" src="@/assets/image/customer/close_icon.png" alt="" />
            <div class="desc">图片支持JPG、PNG、JPEG格式，大小2M以内，建议尺寸620*250。</div>
          </div>
        </el-form-item>
      </blockquote>
      <blockquote v-else>
        <el-form-item label="页面标题 " prop="poster.title">
          <el-input style="width: 580px" v-model="formData.poster.title" placeholder="请输入页面标题" maxlength="15" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="引流页面" prop="poster.type">
          <el-radio-group v-model="formData.poster.type">
            <el-radio :label="1">海报库</el-radio>
            <el-radio :label="2">自定义</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="poster.poster_url">
          <div :class="`upload-content ${props.pageType == 'look' ? 'noEdit' : ''}`" v-if="formData.poster.type == 2">
            <el-upload v-if="!formData.poster.poster_url" @click="getUploadKey(3)" :on-change="(rawFile: any, fileList: any[]) => beforeAvatarUpload(rawFile, fileList, 10)" accept=".jpg,.jpeg,.png,.JPG,.JPEG" :show-file-list="false" :limit="2" :auto-upload="false">
              <div class="upload-box">
                <img src="@/assets/image/content/add-icon.png" alt="" />
                <div>点击上传</div>
              </div>
            </el-upload>
            <div class="upload-file-box" v-else>
              <el-image style="width: 100%; height: 100%" :src="formData.poster.poster_url" fit="cover" />
            </div>
            <img v-if="formData.poster.poster_url" @click="delFile(3)" class="del" src="@/assets/image/customer/close_icon.png" alt="" />
            <div class="desc">*图片大小不超过10M</div>
          </div>

          <blockquote v-else>
            <div class="upload-file-box" style="margin-bottom: 10px" v-if="formData.poster.poster_url">
              <el-image style="width: 100%; height: 100%" :src="formData.poster.poster_url" fit="cover" />
            <img @click="delFile(3)" class="del" src="@/assets/image/customer/close_icon.png" alt="" />
            </div>
            <el-button @click="onPoster">选择海报库</el-button>
          </blockquote>
        </el-form-item>

        <el-form-item label="门店广告 " prop="poster.store_adv_url">
          <div :class="`upload-content ${props.pageType == 'look' ? 'noEdit' : ''}`">
            <el-upload v-if="!formData.poster.store_adv_url" @click="getUploadKey(4)" :on-change="(rawFile: any, fileList: any[]) => beforeAvatarUpload(rawFile, fileList, 2)" accept=".jpg,.jpeg,.png,.JPG,.JPEG" :show-file-list="false" :limit="2" :auto-upload="false">
              <div class="upload-box">
                <img src="@/assets/image/content/add-icon.png" alt="" />
                <div>点击上传</div>
              </div>
            </el-upload>
            <div class="upload-file-box" v-else>
              <el-image style="width: 100%; height: 100%" :src="formData.poster.store_adv_url" fit="cover" />
            </div>
            <img v-if="formData.poster.store_adv_url" @click="delFile(4)" class="del" src="@/assets/image/customer/close_icon.png" alt="" />
            <div class="desc">图片支持JPG、PNG、JPEG格式，大小2M以内，建议尺寸620*250。</div>
          </div>
        </el-form-item>
      </blockquote>
    </el-form>
    <ActivityPhone :shareType="formData.share_type" :card="formData.card" :poster="formData.poster" />
    <div class="phone-box" v-if="false">
      <div class="bg_phone">
        <div class="header">
          <el-icon class="close"><close-bold /></el-icon>
          {{ formData.share_type == 1 ? formData.card.title : formData.poster.title }}
        </div>
        <blockquote v-if="formData.share_type == 1">
          <div class="content-box">
            <div class="store-box">
              <div class="title-box">
                <el-image class="logo" :src="formData.card.company_logo" fit="cover" />
                <div class="name">
                  <div>门店名称</div>
                  {{ formData.card.company_name }}
                </div>
              </div>
              <div class="qcode">
                <img src="@/assets/smartMarketing/qcode.png" alt="" />
              </div>
              <div class="guide">{{ formData.card.guide }}</div>
            </div>
            <el-image class="ad-img" :src="formData.card.store_adv_url" fit="cover" />
          </div>
        </blockquote>
        <blockquote v-else>
          <div class="fixed_img_top">
            <el-image class="posterImg" v-if="formData.poster.poster_url" :src="formData.poster.poster_url" fit="cover" />
          </div>
          <div class="fixed_img_bottom">
            <el-image v-if="formData.poster.store_adv_url" class="ad-img" :src="formData.poster.store_adv_url" fit="cover" />
          </div>
        </blockquote>
      </div>
    </div>
    <ChoosePoster ref="ChoosePosterRef" @save="getPoster" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineExpose } from 'vue'
  import ChoosePoster from '@/view/content/highMaterial/poster/components/ChoosePoster.vue'
  import { uploadFile2 } from '@/api/common'
  import { ElMessage, UploadProps } from 'element-plus'
  import ActivityPhone from '@/components/zw/phonePreview/activityPhonePreview/storeCustomers/index.vue'

  const props = defineProps(['pageType'])
  const formRef = ref({})
  const ChoosePosterRef: any = ref(null)

  const formData = ref({
    share_type: 1,
    card: {
      title: '',
      guide: '',
      company_name: '',
      company_logo: '',
      store_adv_url: ''
    },
    poster: {
      title: '',
      type: 1,
      poster_url: '',
      store_adv_url: ''
    }
  })
  const formRules = ref({
    share_type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
    'card.title': [{ required: true, message: '请输入页面标题', trigger: 'blur' }],
    'card.guide': [{ required: true, message: '请输入扫码引导', trigger: 'blur' }],
    'card.company_name': [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
    'card.company_logo': [{ required: true, message: '请上传企业logo', trigger: 'blur' }],
    'card.store_adv_url': [{ required: true, message: '请上传门店广告', trigger: 'blur' }],
    'poster.title': [{ required: true, message: '请输入页面标题', trigger: 'blur' }],
    'poster.type': [{ required: true, message: '请选择类型', trigger: 'blur' }],
    'poster.poster_url': [{ required: true, message: '请上传选择海报', trigger: 'blur' }],
    'poster.store_adv_url': [{ required: true, message: '请上传门店广告', trigger: 'blur' }]
  })

  let nowUploadKey: any = null
  const getUploadKey = (key: number) => {
    nowUploadKey = key
  }
  // 上传图片的方法
  const uploadFun = (file: any, fileName: string) => {
    uploadFile2({
      file,
      fileName
    }).then((r: any) => {
      if (nowUploadKey == 1) {
        formData.value.card.company_logo = r.url
        return
      }
      if (nowUploadKey == 2) {
        formData.value.card.store_adv_url = r.url
        return
      }
      if (nowUploadKey == 3) {
        formData.value.poster.poster_url = r.url
        return
      }
      formData.value.poster.store_adv_url = r.url
    })
  }

  const delFile = (val: number) => {
    if (val == 1) {
      formData.value.card.company_logo = ''
      return
    }
    if (val == 2) {
      formData.value.card.store_adv_url = ''
      return
    }
    if (val == 3) {
      formData.value.poster.poster_url = ''
      return
    }
    formData.value.poster.store_adv_url = ''
  }
  const onPoster = () => {
    ChoosePosterRef.value.appDialog.visible = true
  }
  const getPoster = (val: any) => {
    formData.value.poster.poster_url = val.list[0].poster_url
  }
  // 上传检验
  const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: any, fileList: any[], size: number = 5) => {
    if (!rawFile) {
      return
    }
    if (rawFile.size / 1024 / 1024 > size) {
      fileList = []
      ElMessage.error(`上传图片大小不能超过${size}M`)
      return false
    }
    uploadFun(rawFile.raw, rawFile.name)
  }

  defineExpose({
    formRef,
    formData
  })
</script>

<style lang="scss" scoped>
  * {
    box-sizing: border-box;
  }
  .DrainageSet-box {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    background-color: #fff;
    padding-bottom: 40px;
    .phone-box {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      margin-right: 80px;
      .bg_phone {
        width: 330px;
        min-height: 495px;
        box-sizing: border-box;
        border-radius: 30px;
        border: 1px solid #d2d8db;
        overflow: hidden;
        justify-content: center;
        background-color: #f8f8f8;
        overflow: auto;
        padding-bottom: 40px;
        .header {
          background: #ffffff;
          border-radius: 1px;
          border: 1px solid #f5f5f5;
          position: relative;
          text-align: center;
          font-size: 16px;
          font-family: STHeitiSC-Medium, STHeitiSC;
          font-weight: 500;
          color: #000000;
          height: 44px;
          line-height: 44px;
          .close {
            position: absolute;
            top: 15px;
            left: 10px;
          }
        }
        .content-box {
          box-sizing: border-box;
          padding: 16px 16px 0;
          .store-box {
            background: #ffffff;
            border-radius: 8px;
            padding: 20px 22px 22px;
            margin-bottom: 16px;
            .title-box {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-bottom: 20px;
              .logo {
                width: 60px;
                height: 60px;
                border-radius: 8px;
                margin-right: 13px;
              }
              .name {
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #969696;
                div {
                  font-size: 17px;
                  font-family: STHeitiSC-Medium, STHeitiSC;
                  font-weight: 500;
                  color: #33302d;
                  padding-bottom: 12px;
                }
              }
            }
            .qcode {
              background: #f2f6fc;
              border-radius: 8px;
              border: 1px solid #eaeaea;
              padding: 22px;
              height: 252px;
              margin-bottom: 11px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .guide {
              font-size: 15px;
              font-family: STHeitiSC-Light, STHeitiSC;
              font-weight: 300;
              color: #969696;
              line-height: 24px;
              text-align: center;
            }
          }
        }

        .fixed_img_top {
          width: 100%;
          height: 583px;
          .posterImg {
            width: 100%;
            height: 100%;
            margin-bottom: 16px;
          }
        }
        .fixed_img_bottom {
          width: 100%;
          height: 154px;
          padding-top: 15px;
        }
      }
    }

    .upload-content {
      position: relative;
      .desc {
        font-size: 12px;
        line-height: 12px;
        margin-top: 16px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #969696;
      }
      &.noEdit {
        pointer-events: none !important;
      }
      .upload-box {
        width: 110px;
        height: 110px;
        text-align: center;
        border-radius: 4px;
        background: #f8f8f8;
        border: 1px solid #eaeaea;
        box-sizing: border-box;
        padding-top: 28px;
        img {
          width: 20px;
          height: 20px;
        }
        div {
          width: 100%;
          line-height: 14px;
          font-size: 14px;
          font-family: STHeitiSC-Light, STHeitiSC;
          color: #ff6b00;
        }
      }
      .del {
        position: absolute;
        width: 20px;
        height: 20px;
        top: -8px;
        left: 99px;
      }

      .upload-desc {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #969696;
        padding-top: 10px;
        span {
          color: #ff6b00;
          cursor: pointer;
        }
      }
    }
    .upload-file-box {
      position: relative;
      width: 110px;
      height: 110px;
      border-radius: 4px;
      border: 1px solid #eaeaea;
      overflow: hidden;
     
    }
    .ad-img {
      width: 100%;
      height: 154px;
      border-radius: 10px;
    }
  }
  .el-form-item {
    margin-bottom: 24px;
  }
</style>
